import React from "react";
import { BrowserRouter, Route, Switch,Redirect } from "react-router-dom";
import Home from "../pages/index";
import Individuation from "../pages/individuation";
import SongList from "../pages/song-list";
import Ranklist from "../pages/ranklist";
import Singer from "../pages/singer"
import Mv from "../pages/mv"
import NewSong from "../pages/new-song"
import songListDetail from "../pages/common/song-list-detail"
import MvDetail from '../pages/common/mv-detail'

export default class RouterPage extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Route path="/" render={()=>
            <Home>
                <Switch>
                    <Route path="/individuation" component={Individuation} ></Route>
                    <Route path="/songList" component={SongList} ></Route>
                    <Route path="/ranklist" component={Ranklist} ></Route>
                    <Route path="/singer" component={Singer} ></Route>
                    <Route path="/mv" component={Mv} ></Route>
                    <Route path="/newsong" component={NewSong} ></Route>
                    <Route path="/songListDetail" exact component={songListDetail} ></Route>
                    <Route path="/mvDetail" exact component={MvDetail} ></Route>
                </Switch>
            </Home>
        }></Route>
        <Redirect path="/individuation" to={{pathname: '/individuation'}} ></Redirect>  
      </BrowserRouter>
    );
  }
}
